<template>
	<view class="check-item-page">
		<cu-custom bgColor="bg-E96141" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">在线药品</block>
		</cu-custom>
		
		<!-- 搜索栏 -->
<!-- 		<view class="navbar" :style="{position:headerPosition}" style="display: none;">
			<view class="search-con">
				<input 
					class="input-keyword" 
					type="text" 
					:value="keyword"
					maxlength="20"
					@input="inputChange" 
					data-key="keyword"					
					placeholder="请输入药品名称"/>
				<text class="btn-search" @tap="handleSearch">
					<text class="yticon icon-sousuo"></text>搜索
				</text>
				<text class="btn-clear" @tap="handleClear">
					<text class="yticon icon-iconfontshanchu1"></text>清除
				</text>
			</view>
		</view> -->
<view class="content" sty le="margin-top: 300upx;">
	   <!-- //搜索 -->
	   <view class="search-con" style="display: flex;justify-content:space-around;margin-top: 18upx;">
	    <input style="width: 410upx;height: 60upx;padding:5upx 10upx; #ffffff;border: 1px solid #b4b4b4; border-radius: 50upx;font-size: 20upx;background-color: #fafaf8;"
			class="input-keyword"
			type="text" 
			:value="keyword"
			maxlength="20"
			@input="inputChange" 
			data-key="keyword"					
			placeholder="请输入药品名称"/>
	    <text class="btn-search" @tap="handleSearch" style="border: 1px solid #b4b4b4;text-align: center;padding:16upx 10upx;line-height: 28upx;border-radius: 40upx;background-color: #e86243;font-size: 20upx;width: 70upx;width: 100upx;color: #FFFFFF;">
	     <text class="yticon icon-sousuo"></text>搜索
	    </text>
	    <text class="btn-clear" @tap="handleClear"style="border: 1px solid #b4b4b4;text-align: center;padding:16upx 10upx;line-height: 28upx;border-radius: 40upx;background-color: #03bbd5;font-size: 20upx;width: 70upx;width: 100upx;color: #FFFFFF;">
	     <text class="yticon icon-iconfontshanchu1"></text>清除
	    </text>
	    
	   </view>	
		<!-- 药店信息 -->
	 <view style="display: flex;justify-content: center;padding:10px;margin-top: -26upx;">
			<!-- <view class="search-con"> -->
			
				  <view style="display:flex;justify-content:center;padding:14upx 5upx;width:100%;justify-content: center;align-items: center;">
				         <text  style="font-size: 26upx;margin-right: 20upx;width: 20%;">选择药店</text> 
						<ep-select :disabled="false" v-model="select" :options="options" @change="change"></ep-select>
				  </view>
			
					<!-- <text class="yticon icon-sousuo">药店名称</text> -->
				
				<!-- <select class="input-keyword" @change="yaodianchange" value="">
					<option class="input-keyword" >请选择药店</option>
					<block v-for="(item,index) in yaodians" :key="index" >
						<option  :value="item.id" class="input-keyword" >{{item.title}}</option>
					</block>
					
				</select> -->
				
				
				<!-- <input 
					class="input-keyword" 
					type="checkbox" 
					:value="keyword"
					maxlength="20"
					data-key="keyword"
					@input="inputChange"
					placeholder="搜索检测项目名称"/> -->
				
			<!-- 	<text class="btn-clear" @tap="handleClear">
					<text class="yticon icon-iconfontshanchu1"></text>清除
				</text> -->
			<!-- </view> -->
		</view>
	
			<!-- <view style="flex:1">
				<text>药店名称</text>
			</view>
			<view style="flex:4;font-size: 15upx;">
				<radio-group @change="radioChange" style="display: flex;line-height: 15upx;">
					<label v-for="(item,index) in yaodians" :key="index">
						<radio :value="item.title" :checked="index==current" style="width: 10upx;" />
						<text>{{item.title}}</text>
					</label>
				</radio-group>
			</view> -->
			
				
		
		
		
		
		<view class="VerticalBox" style="margin-top: -10upx;">
			<!-- 分类 -->
			<!-- visibility: hidden; -->
			<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="0">
				<view style="height: 1px; overflow: hidden; line-height: 1px; border: 0px solid #f00; background-color: #fff;">
					<view></view>
				</view>
				<block v-for="(item, index) in checkItemCategorys" :key="item.id">
					<view class="cu-item" :class="item.id==checkItemCategoryId?'text-red cur':''" 
						@tap="changeCheckItemCategory(item)">
						<view :class="item.id==checkItemCategoryId?'curr-cate-title':''">
							{{item.title}}
						</view>
					</view>
				</block>
			</scroll-view>
			
			
			<!--检测项目-->
			<scroll-view class="VerticalMain" 
				scroll-y 
				scroll-with-animation
				@scrolltolower="handleScrolltolower()">
				<view class="no-data-con"
					v-if="!pageDataList || pageDataList.length==0">
					<image src="https://ylb123.oss-cn-hangzhou.aliyuncs.com/app/empty.png"></image>
					<view class="title">暂无药品~</view>
				</view>
				<!-- #{{scCheckItemIds}}# -->
				<view
					v-if="pageDataList && pageDataList.length>0"
					v-for="(item, index) in pageDataList" 
					:key="item.id" 
					class="page-data-item">
					<view>
						<view class="basis-xs"
							:style="'background:url('+ (item.imageUrl?item.imageUrl:ciDefaultCoverImg) +') center center no-repeat;background-size: 96%;'"
							style="height: 300rpx; border-radius: 10rpx; position: relative; margin-bottom: 15rpx;">
						</view>
						<view class="title">{{item.title}}</view>
						<view class="oper-con">
							<button class="cu-btn bg-orange round kefu-btn"
								@tap="onlineKefu()"><text space="emsp">咨询</text>
							</button>
							<button class="cu-btn bg-cyan round yu-yue-btn"
								@tap="editShopCar(item)">
								<!-- <text space="emsp">{{item.hasBuy?'取消':'订购'}}</text> -->
								<text space="emsp">订购</text>
							</button>
							<!-- @tap="toSubmitOrder()" -->
							<!-- <button class="cu-btn bg-pink round yu-yue-btn"><text space="emsp">结算</text> -->
							</button>
						</view>
						<view class="desc-con"><text class="item-name">[1]</text>药品名称：{{item.title?item.title:'暂无'}}</view>
						<view class="desc-con"><text class="item-name">[2]</text>药品功效：{{item.desciption?item.desciption:'暂无'}}</view>
						<view class="desc-con"><text class="item-name">[3]</text>药品价格：{{(item.ylbprice && item.ylbprice>0)?(item.ylbprice+'元'):'暂无'}}</view>
						<view class="desc-con"><text class="item-name">[4]</text>药品厂家：{{item.produce?item.produce:'暂无'}}</view>
						<view class="desc-con"><text class="item-name">[5]</text>药店名称：{{item.dragproductId_dictText?item.dragproductId_dictText:'暂无'}}</view>
					</view>
				</view>
				
				<uni-load-more
					v-if="pageDataList && pageDataList.length>0"
					:status="loadingType"></uni-load-more>
			</scroll-view>
		
		</view>
	</view>
		
		<!-- 购物车 -->
		<!-- 图标 -->
		<view class="shop-car-icon" @tap="toSubmitOrder()">
			<view class="count">
				{{(scCheckItemIds && scCheckItemIds.length>0)?scCheckItemIds.length:0}}
			</view>
			<view class="iconfont cyIcon-tianmaochaoshigouwuche my-icon"></view>
		</view>
		
		<!-- <uni-load-more
			v-if="pageDataList && pageDataList.length>0"
			:status="loadingType"></uni-load-more> -->
	</view>
</template>

<script>
	import {
		USER_HAS_LOGIN,
		USER_IDENTITY,
		COMPANY_KEFU_PHONE1,
	} from "@/common/util/constants"
	// import checkbox from "./checkbox.vue"
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	// import yinrhSpinner from '@/uni_modules/yinrh-spinner/components/yinrh-spinner/yinrh-spinner'
	export default {
		name: "list",
		components: {
			uniLoadMore
			// checkbox,
		},
		data() {
			return {
							selectvalue: '',
							yaodians: [],
							headerPosition:"fixed",
							userIdentity: '',
							headerPosition:"fixed",
							ciDefaultCoverImg: 'https://ylb123.oss-cn-hangzhou.aliyuncs.com/app/check-item-v2-noimage.jpg',
							select: '1492838892855271425',
							options:[], //药店名称
							 
							loadingType: 'more', 			//加载更多状态
							pageDataList: [],
							keyword: '',
							currPageNo: 1,
							totalPageNo: 1,
							pageSize: 10,
							
							checkItemCategoryId: '',		//检测项目-分类ID
							checkItemCategorys: [],			//检测项目-分类
							scCheckItemIds: [],				//选中的"检测项目ID"
						}
		},
		created() {
			this.validUserInfo()
			this.loadCheckItemCategory()
			this.loadData()
			this.loadyaodian()
		},
		methods: {
				//药店更换
			change(e){
					console.log('select = ',this.select)
					this.yaodianchange()
				},
				//搜索清除方法
				handleClear(){
					this.keyword=""	
					
					this.handleSearch()
					console.log(9999)
		},
			// 用户信息
			validUserInfo(){
				this.userIdentity = uni.getStorageSync(USER_IDENTITY)
				this.userHasLogin = uni.getStorageSync(USER_HAS_LOGIN)
				if(this.userHasLogin!='1'){
					this.$tip.toast('登录超时');
					let app_must_permission_status = uni.getStorageSync('APP_MUST_PERMISSION_STATUS')
					uni.clearStorageSync();
					uni.setStorageSync('APP_MUST_PERMISSION_STATUS', app_must_permission_status)
					setTimeout(function() {
						uni.redirectTo({
						    url: '/pages/login/login'
						});
					}, 500);
					return false
				}
			},
			inputChange(e){
			    this.keyword = e.detail.value
			  },
			handleSearch(){
				console.log(this.keyword)
				let that = this				
				let _params={
					title:that.keyword
				}
				let url="/drug/drugproduct/listByPid"
				 that.$http.get(url,{params:_params}).then(res=>{
						if(res.data.success){
							that.pageDataList=res.data.result.records
						}
				})
			},
			//获取药店下的药品信息
				yaodianchange(e){
					console.log(e)
					let that = this				
					let _params={
						dragproductId:that.select
					}
					uni.showLoading({
						title: '加载中..',
						mask: true,
					})
					let url="/drug/drugproduct/listByPid"
					 that.$http.get(url,{params:_params}).then(res=>{
						if(res.data.success){
							that.pageDataList=res.data.result.records
							uni.hideLoading()
						}
					})
					console.log(that.pageDataList)
				},
				//获取药店信息
				loadyaodian(){
					let that = this				
					let url="/drugmng/yaodianmanager/list"
					 that.$http.get(url).then(res=>{
						if(res.data.success){
							that.yaodians=res.data.result.records
							for(var i=0;i<that.yaodians.length;i++){
								let item={}
								item.value=that.yaodians[i].id
								item.label=that.yaodians[i].title
								that.options.push(item)
							}
						}
					console.log(that.options)
					})
				},
			
			//检测项目分类-加载
			loadCheckItemCategory(){
				//追加默认全部分类
				this.checkItemCategorys = [
					{id: '0', title: '全部分类'}
				]
				this.checkItemCategoryId = this.checkItemCategorys[0].id
				
				let _pageParams = {
					pageNo: 1,
					pageSize: 50,
					type: 1,
				}
				let that = this
				let url="/checkproject/project/list"
				// let url="/drug/drugproduct/listByPid"
				//获取药品大类所有的药品 /drug/drugproduct/listByPid
				that.$http.get(url, {params:_pageParams}).then(res=>{
					if(res.data.success){
						/*检测项目分类数组
							{
								id: "1485246191345704962"
								status: "1"
								title: "心血管疾病系列"
								type: "心血管"
							}
						*/
						let jsonData = res.data.result.records
						if(jsonData && jsonData.length>0){
							for(let i=0;i<jsonData.length;i++){
								that.checkItemCategorys.push(jsonData[i])
							}
						}
					}else{
						//that.$tip.cyToast('检测项目分类加载失败')
					}
				}).catch(err => {
				});
			},
			//检测项目分类-切换
			changeCheckItemCategory(item){
				if(!item || !item.id){
					this.$tip.cyToast('检测项目分类错误')
					return false
				}
				
				//切换自身不做处理
				if(this.checkItemCategoryId==item.id){
					return false
				}
				
				this.resetPageParam()
				this.checkItemCategoryId = item.id
				console.info("---item.id--"+item.id)
				this.loadData()
			},
			onPageScroll(e){
				//兼容iOS端下拉时顶部漂移
				if(e.scrollTop>=0){
					this.headerPosition = "fixed";
				}else{
					this.headerPosition = "absolute";
				}
			},
			//下拉刷新
			onPullDownRefresh(){
				this.loadData('refresh');
			},
			//上拉触底事件
			handleScrolltolower(e) {
				if(this.loadingType=='more'){
					this.loadData()
				}
			},
			// 滚动事件
			handleScroll(e) {
			},
			//重置分页参数
			resetPageParam(){
				this.loadingType = 'more'
				this.pageDataList = []
				this.keyword = ''
				this.checkItemCategoryId = ''
				this.currPageNo = 1
				this.totalPageNo = 1
				this.pageSize = 10
			},
			//分页加载 ，带下拉刷新和上滑加载
			async loadData(type='add', loading) {
				let that = this
				//没有更多直接返回
				if(type === 'add'){
					if(that.loadingType === 'nomore'){
						return;
					}
					that.loadingType = 'loading';
				}else if(type === 'refresh'){
					that.pageDataList = []
					that.currPageNo = 1
				}else{
					that.loadingType = 'more'
				}
				if(that.currPageNo>that.totalPageNo){
					that.loadingType = 'nomore'
					if(loading == 1){
						uni.hideLoading()
					}else{
						uni.stopPullDownRefresh();
					}
					return false
				}
				
				let _pageParams = {
					pageNo: that.currPageNo,
					pageSize: that.pageSize,
					//keyword: '',
					//checkItemCategoryId: (that.checkItemCategoryId=='0'?'':that.checkItemCategoryId),
					parentId: (that.checkItemCategoryId=='0'?'12001':that.checkItemCategoryId),
				}
				uni.showLoading({
					title: '加载中..',
					mask: true,
				})
				// let url='/checkprojectson/check/list'
				let url='/drug/drugproduct/listByPid'
				let list = await that.$http.get(url, {params:_pageParams})
					.then(res => {
						if(res.data.success){
							/* 返回数组
								{
									checkProjectId: "1485246736898826242"
									checkname: "TP53肿瘤易感基因检测"
									demo: "EDTA抗凝血2ml或专用耗材采集口腔脱落细胞适量"
									description: "TP53基因是维持基因组稳定性的重要基因，如TP53基因发生突变，则患癌风险增加"
									id: "1485254525469679617"
									price: "400"
									reportTime: "18个工作日"
									status: "1"
									useMtd: "PCR法"
									ylbprice: "400"
								}
							*/
							uni.hideLoading()
							let jsonData = res.data.result
							if(!jsonData){
								return []
							}
							that.totalPageNo = jsonData.pages
							let _list = jsonData.records?jsonData.records:[]
							return _list
						}else{
							uni.hideLoading()
						}
					}).catch(err => {
						uni.hideLoading()
						return []
					});
				
				if(list && list.length>0){
					list.forEach(item=>{
						that.pageDataList.push(item)
					})
				}
				
				//判断是否还有下一页，有是more  没有是nomore
				that.loadingType  = (that.currPageNo >= that.totalPageNo)?'nomore':'more'
				if(type === 'refresh'){
					if(loading == 1){
						uni.hideLoading()
					}else{
						uni.stopPullDownRefresh();
					}
				}
				
				if(that.currPageNo<that.totalPageNo){
					that.currPageNo++
				}
			},
			stopPrevent(){
			},
			//在线客服
			onlineKefu(){
				if(this.userIdentity!='0'){
					this.$tip.cyToast('仅对会员开放')
					return false
				}
				uni.showLoading({
					title: '调度中..',
					mask: true,
				})
				let that = this
				that.$http.get("/onlineservice/wxkf/list", {}).then(res=>{
					if(res.data.success){
						uni.hideLoading()
						/*返回数据结构, 是个数组, 取第一个即可
							[
								{
									groupId: "ww5f63ceded24818ab"
									url: "https://work.weixin.qq.com/kfid/kfcc5d6030bea412d37"
								}
							]
						*/
						let jsonData = res.data.result.records
						if(!jsonData || jsonData.length<1){
							that.$tip.cyToast('微信客服参数错误')
							return false
						}
						if(!jsonData[0].groupId || !jsonData[0].url){
							that.$tip.cyToast('微信客服参数错误')
							return false
						}
						
						// #ifdef APP-PLUS
						let weiXinKefuInfo = {
							corpid: jsonData[0].groupId,
							kefuUrl: jsonData[0].url,
						}
						that.openWeiXinKefu(weiXinKefuInfo)
						// #endif
					}else{
						uni.hideLoading()
						that.$tip.cyToast('坐席繁忙，请稍后再试');
					}
				}).catch(err => {
					uni.hideLoading()
				});
			},
			//接入微信客服
			openWeiXinKefu(weiXinKefuInfo){
				// #ifdef APP-PLUS
				if(!weiXinKefuInfo || !weiXinKefuInfo.corpid || !weiXinKefuInfo.kefuUrl){
					this.$tip.cyToast('微信客服参数错误')
					return false
				}
				
				let sweixin = null
				plus.share.getServices(res=>{
					sweixin = res.find(i => i.id === 'weixin')
					if(sweixin){
						sweixin.openCustomerServiceChat({
							//微信客服-企业ID
							corpid: weiXinKefuInfo.corpid,    	
							//微信客服-某个客服的URL
							url: weiXinKefuInfo.kefuUrl,
						},suc=>{
							//console.log("success",JSON.stringify(res))
						},err=>{
							//console.log("error",JSON.stringify(err))
						})
					}else{
						plus.nativeUI.alert('当前环境不支持微信操作!')
					}
				},function(){
					uni.showToast({title: "获取服务失败，不支持该操作。"+JSON.stringify(e), icon: 'error'})
				})
				// #endif
				// #ifndef APP-PLUS
				window.location.href = "https://work.weixin.qq.com/kfid/kfcc5d6030bea412d37"
				// #endif
			},
			//订购/取消
			editShopCar(item){
				if(this.userIdentity!='0'){
					this.$tip.cyToast('仅对会员开放')
					return false
				}
				let that = this
				
					if(!item || !item.id){
						that.$tip.cyToast('检测项目不存在或已下架')
						return false
					}
					let ciId = item.id
					let ciName = ' ['+item.title+']'
					
					//更新自身item数据
					/* if(item.hasBuy){
						item.hasBuy = false
					}else{
						item.hasBuy = true
					} */
					
					//购物车
					let _index = that.scCheckItemIds.indexOf(ciId)
					let _toastInfo = ''
					if(_index==-1){
						//购物车中没有, 表示将要添加
						_toastInfo = '已选'
						that.scCheckItemIds.push(ciId)
					}else{
						//购物车中已有, 表示将其删除
						_toastInfo = '取消'
						that.scCheckItemIds.splice(_index, 1)
					}
					that.$tip.cyToast((_toastInfo+ciName), '', 1000)
					//console.log('that.scCheckItemIds = ', that.scCheckItemIds)
					
					//更新分页数据中的属性
					/* let _item = {}
					for(let i=0;i<that.pageDataList.length;i++){
						_item = that.pageDataList[i]
						if(ciId==_item.id){
							if(_item.hasBuy){
								//已经购买, 表示将要取消
								_item.hasBuy = false
							}else{
								//还未购买, 表示将要买
								_item.hasBuy = true
							}
							that.pageDataList[i] = _item
						}
					} */
				/* setTimeout(function() {
				}, 300); */
			},
			//下单付款
			toSubmitOrder(){
				if(this.userIdentity!='0'){
					this.$tip.cyToast('仅对会员开放')
					return false
				}
				if(!this.scCheckItemIds || this.scCheckItemIds.length==0){
					this.$tip.cyToast('请先选择检测项目')
					return false
				}
				let nextPageParams = '?orderType=3' + 
					'&ciIds=' + this.scCheckItemIds.toString()
				//console.log('list nextPageParams = ', nextPageParams)
				uni.navigateTo({
					url: '/pages/order/submit-order' + nextPageParams
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.check-item-page{
	
	.member-info{
		width: 100%;
		position: fixed;
		
		z-index: 10;
		left: 0;
		// #ifdef APP-PLUS
		top: 200upx;
		// #endif
		background-color: #ffffff;
		height: 100px;
		overflow: hidden;
		padding: 20px;
		border: 0px solid #f00;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		.list-item{
			float:left;
			width: 50%;
			margin-bottom: 10px;
			.pure-text{
				height: 30px;
				line-height: 30px;
			}
			.btn-1{
				float: right;
				background-color: #1CBBB4;
				height: 30px;
				line-height: 30px;
			}
			.btn-2{
				float: right;
				background-color: #ff9800;
				height: 30px;
				line-height: 30px;
			}
		}
	}
	
	/* 购物车 */
	.shop-car-icon{
		width: 48px;
		height: 48px;
		text-align: center;
		position: fixed;
		right: 2px;
		bottom: 20%;
		background-color: #ffffff;
		border-radius: 50px;
		border: 1px solid #ececec;
		box-shadow: 0 2px 5px #dcdcdc;
		color: #E96141;
		padding-top: 3px;
		.count{
			font-size: 14px;
			font-weight: bold;
		}
		.my-icon{
			font-size: 24px;
		}
	}
	
	/* 搜索栏 */
	.navbar{
		position: fixed;
		left: 0;
		// #ifdef APP-PLUS
		top: 78px;
		// #endif
		display: flex;
		width: 100%;
		/* height: 160upx; */
		height: 65px;
		overflow: hidden;
		background: #fff;
		box-shadow: 0 2upx 10upx rgba(0,0,0,.06);
		z-index: 10;
		flex-wrap: wrap;
		border: 0px solid #f00;
		.search-con{
			display: flex;
			width: 100%;
			padding: 30upx;
			.input-keyword{
				flex:1;
				height: 60upx;
				line-height: 60upx;
				padding: 0 16upx;
				color: #666666;
				border-radius: 100upx;
				border:1px solid #cccccc;
			}
			.btn-search{
				width: 120upx;
				height: 60upx;
				line-height: 60upx;
				text-align: center;
				padding: 0;
				margin-left: 16upx;
				color: #ffffff;
				background-color: #EA6040;
				border-radius: 40upx;
			}
			.btn-clear{
				width: 120upx;
				height: 60upx;
				line-height: 60upx;
				text-align: center;
				padding: 0;
				margin-left: 16upx;
				color: #ffff;
				background-color: #00bcd4;
				border-radius: 40upx;
			}
		}
		.nav-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30upx;
			color: #999999;
			position: relative;
			&.current{
				color: #999999;
				padding-bottom: 16upx;
				&:after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120upx;
					height: 0;
					border-bottom: 4upx solid #999999;
				}
			}
		}
		.p-box{
			display: flex;
			flex-direction: column;
			.yticon{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30upx;
				height: 14upx;
				line-height: 1;
				margin-left: 4upx;
				font-size: 26upx;
				color: #888;
				&.active{
					color: #999999;
				}
			}
			.xia{
				transform: scaleY(-1);
			}
		}
		.cate-item{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			width: 80upx;
			position: relative;
			font-size: 44upx;
			&:after{
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				border-left: 1px solid #ddd;
				width: 0;
				height: 36upx;
			}
		}
	}
	
	/* 团购 */
	.group-buy-con{
		.img{
			width: 100%;
			height: 50rpx;
			margin-bottom: 20rpx;
		}
		.group-buy-zhe-zhao{
			width:100%; 
			height:300rpx; 
			line-height: 300rpx;
			position:absolute;
			background:url(http://cdn.qiniu.xzbaigui.com/zhe-zhao-1.png) center center no-repeat;
			background-size: 100%; 
			z-index:100; 
			border-radius: 10rpx;
			color: #cccccc;
			font-size: 38rpx;
			text-align: center;
		}
		.gb-title{
			color: #333333;
			border-right: 1px solid #efefef;
			padding-right: 10rpx;
		}
		.gb-number{
			color: #e44e40;
		}
		.coinIco{
			color: #e44e40;
			font-weight: 700;
		}
		.runningTime{
			margin-top: 10rpx;
			font-size: 22rpx;
			font-weight: normal;
			color: #cccccc;
		}
		.curSalePrice{
			color: #e44e40;
			font-size: 36rpx;
			font-weight: 700;
			margin-right: 10rpx;
		}
		.beginSalePrice{
			color: #cccccc;
			text-decoration: line-through;
			margin-right: 10rpx;
		}
		.totalDropPrice{
			color: #39B54A;
		}
	}
}


.curr-cate-title{
	color: #E96141;
	font-weight: bold;
}

.VerticalNav.nav {
	width: 250upx;
	color: #666666;
	height: calc(100vh - (var(--status-bar-height) + 101rpx));
	white-space: initial;
	border: 0px solid #f00;
}

.VerticalNav.nav .cu-item {
	width: 100%;
	background-color: #FAFAFA;
	margin: 0;
	border: none;
	height: 50px;
	position: relative;
}

.VerticalNav.nav .cu-item.cur {
	background-color: #FFFFFF;
}

.VerticalNav.nav .cu-item.cur::after {
	content: "";
	width: 7.27rpx;
	height: 32.72rpx;
	border-radius: 0px 9.09rpx 9.09rpx 0px;
	position: absolute;
	background-color: #E96141;
	top: 0;
	left: 0;
	bottom: 0;
	margin: auto;
}

.VerticalBox {
	display: flex;
	width: 100%;
	position: absolute;
	// #ifdef APP-PLUS
	/* padding-top: 120px; */
	// #endif
	// #ifndef APP-PLUS
	top: 50px;
	// #endif
}

/* 分页-无数据 */
.no-data-con{
	width: 100%;
	text-align: center;
	padding: 30% 0 0 0;
	image{
		width: 150px !important;
		height: 150px !important;
	}
	.title{
		color: #aaaaaa;
	}
}
/* 分页-数据循环 */
.page-data-item{
	color: #999999;
	margin: 30upx 15upx;
	padding-bottom: 15upx;
	border-bottom: 1px dashed #cccccc;
	.title{
		color: #666666;
		font-size: 32upx;
		font-weight: bold;
		margin-bottom: 10upx;
		height: 50upx;
		line-height: 50upx;
		
		overflow: hidden;
	}
	.oper-con{
		font-size: 26upx;
		margin: 15upx 0;
		/* text-align: right; */
		.yu-yue-btn{
			margin-right: 15upx;
		}
		.kefu-btn{
			margin-right: 15upx;
		}
	}
	.desc-con{
		margin-bottom: 10upx;
		border: 0px solid #f00;
		.item-name{
			font-weight: bold;
			margin-right: 5upx;
			color: #ff9800;
		}
	}
	
}

.VerticalMain {
	background-color: #FFFFFF;
	height: calc(100vh - (var(--status-bar-height) + 101rpx));
	flex: 1;
}

.zaiui-grid-icon-box {
	position: relative;
	width: 100%;
	.cu-list.grid {
		background-color: inherit;
		.grid-icon {
			margin: 0;
			.icon {
				width: 127.27rpx;
			}
		}
	}
	.cu-list.grid>.cu-item {
		padding-bottom: 9.09rpx;
		text {
			color: #333333;
		}
	}
	.cu-list.grid.no-border {
	    padding: 0;
	}
}

</style>


</style>
